<template>
    <div class="music-info">
      <div class="music-detail">
        <div class="detail_info">
          <div class="info_img">
            <img :src="song_track.track.album_pic" alt="">
          </div>
          <div class="info_more">
            <div class="name">{{song_track.track.title}}</div>
            <div class="singer">
              <span class="iconfont icon-ren111"></span>
              <span v-for="(item,index) in song_track.track.singers" @click="toSingerDetail(item.mid)">
                {{item.name}}
                <span>{{index!=song_track.track.singers.length-1?'/':''}}</span>
              </span>
            </div>
            <ul class="detail">
              <li>专辑：<span @click="toAlbumDetail(song_track.track.album_mid,song_track.track.album_id)">{{song_track.track.album_name}}</span></li>
              <li>语种：<span>{{song_track.lables.lan.value}}</span></li>
              <li>流派：<span>{{song_track.lables.genre.value}}</span></li>
              <li>唱片公司：<span>{{song_track.lables.company.value}}</span></li>
              <li>发行时间：<span>{{song_track.lables.pub_time.value}}</span></li>
            </ul>
            <OtherInfo></OtherInfo>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import OtherInfo from '../OtherInfo/OtherInfo'
    export default {
        name: "MusicInfo",
        props:{
          song:Object
        },
        components:{
          OtherInfo
        },
        data(){
          return{
            song_track:{
              track:{},
              lables:{
                company:{},
                lan:{},
                pub_time:{},
                genre:{}
              },
            }
          }
        },
        methods:{
          toSingerDetail(mid){
            this.$router.replace(`/singerdetail/${mid}`);
          },
          toAlbumDetail(mid,id){
            // console.log(id);
            this.$router.replace({path:`/albumdetail/${mid}/${id}`});
          },
        },
        watch:{
          song(value){
            this.song_track.track=value.song_track.track;
            if(value.song_track.lables.lan){
              this.song_track.lables.lan=value.song_track.lables.lan.content[0]
            }
            if(value.song_track.lables.company){
              this.song_track.lables.company=value.song_track.lables.company.content[0]
            }
            if(value.song_track.lables.pub_time){
              this.song_track.lables.pub_time=value.song_track.lables.pub_time.content[0]
            }
            if(value.song_track.lables.genre){
              this.song_track.lables.genre=value.song_track.lables.genre.content[0]
            }
          }
        }
    }
</script>

<style scoped lang="less">
  .music-info .music-detail{width: 100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);margin: 0 auto;}
  .music-info .music-detail .detail_info{width: 1200px;margin: 0px auto; padding: 40px 0px;position: relative}
  .music-info .detail_info .info_img{width: 250px;height: 250px;display: inline-block;margin-right: 56px}
  .music-info .detail_info .info_img img{width: 250px;height: 250px;}
  .music-info .detail_info .info_more{display: inline-block;position: absolute;margin-top: 30px;top:40px}
  .music-info .detail_info .info_more .name{font-size: 30px;padding-bottom: 16px}
  .music-info .detail_info .info_more .singer .iconfont{color:#a2a2a2;}
  .music-info .detail_info .info_more .singer>span:hover{cursor: pointer;color: #31c27c}
  .music-info .detail_info .info_more .singer>span:hover>span{color: black;}
  .music-info .detail_info .info_more .detail{width:637px;padding: 8px 0px}
  .music-info .detail_info .info_more .detail li{display: inline-block;width: 316px;margin: 8px 0px}
  .music-info .detail_info .info_more .detail li:nth-child(1) span:last-child:hover{color: #31c27c;cursor: pointer}
  .music-info .detail_info .info_more .detail li:nth-child(4) span:last-child:hover{color: #31c27c;cursor: pointer}
</style>
